<template>
  <div>
    <!--    <el-form-item>
              <span slot="label">
                选择组织架构
                <el-tooltip class="item" content="支持选择系统组织架构作为评选对象" effect="dark" placement="top-start">
                  <i class="el-icon-question" />
                </el-tooltip>
              </span>
              <el-switch v-model="activeData.isSelectOrganization" />
            </el-form-item>-->
    <el-form-item>
      <span slot="label">题目说明</span>
      <el-input v-model="activeData.summary"></el-input>
    </el-form-item>
    <el-form-item v-if="formType == 6">
      <span slot="label"
        >配置被评价人角色
        <el-tooltip class="item" content="支持根据被评价人角色配置是否显示该问题" effect="dark" placement="top-start">
          <i class="el-icon-question" />
        </el-tooltip>
      </span>
      <el-select v-model="activeData.selectedList" multiple placeholder="请选择">
        <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="量级设置">
      <el-input-number v-model="activeData.table.level" :min="1" :max="100" label="描述文字" />
    </el-form-item>
    <el-form-item v-if="activeData.table.copyWriting" label="最低分文案">
      <el-input v-model="activeData.table.copyWriting.min" placeholder="请输入最低分文案" />
    </el-form-item>
    <el-form-item v-if="activeData.table.copyWriting" label="最高分文案">
      <el-input v-model="activeData.table.copyWriting.max" placeholder="请输入最高分文案" />
    </el-form-item>
    <el-form-item label="图标">
      <span
        v-for="icon in iconList"
        :key="icon"
        :class="[icon, icon === activeData.icon ? 'selected' : '']"
        :style="styleObject"
        @click="handleSelectIcon(icon)"
      />
    </el-form-item>

    <el-form-item label="图标颜色">
      <el-color-picker v-model="activeData.iconColor" />
    </el-form-item>

    <matrix-option :active-data="activeData" />
  </div>
</template>
<script>
import MatrixOption from './matrix'
import draggable from 'vuedraggable'
import Role from '@/views/manage/role'
import { queryRoleList } from '@/api/mange/role'

export default {
  name: 'ConfigItemMatrixScale',
  components: {
    MatrixOption,
    draggable,
    Role
  },
  props: ['activeData'],
  data() {
    return {
      iconList: [
        'tduck-taiyang',
        'tduck-biaoqing-weixiao',
        'tduck-dianzan',
        'tduck-aixin',
        'tduck-star',
        'tduck-moonyueliang'
      ],
      formType: '',
      selectedList: [],
      roleList: []
    }
  },
  created() {
    this.formType = this.$route.query.type || this.$route.params.type
    this.getRoleList()
  },
  computed: {
    styleObject() {
      return {
        '--color': this.activeData.iconColor || '#f7ba2a'
      }
    }
  },
  methods: {
    handleSelectIcon(icon) {
      // console.log(icon)
      this.$set(this.activeData, 'icon', icon)
    },
    getRoleList() {
      queryRoleList().then((res) => {
        this.roleList = res.data.records
      })
    }
  }
}
</script>

<style lang="scss" scoped>
[class^='tduck-'],
[class*=' tduck-'] {
  margin: 5px;

  &:hover {
    color: var(--color);
  }
}

.selected {
  color: var(--color);
}
</style>
